<template>
  <el-form v-loading.body="listLoading" :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-row :gutter="20">
      <el-col :span="7" :offset="3">
        <!--姓名性别年龄联系电话工作信息住址卡种责任会籍责任教练-->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
          <transition name="el-zoom-in-top">
            <div class="el-form-item__error" v-if="errors.name">{{errors.name ? errors.name[0] : ''}}</div>
          </transition>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio  label="男">男</el-radio>
            <el-radio  label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="ruleForm.birthday"
            type="date"
            placeholder="选择日期"
            @change="pickerChange"
            >
          </el-date-picker>
          <transition name="el-zoom-in-top">
            <div class="el-form-item__error" v-if="errors.birthday">{{errors.birthday ? errors.birthday[0] : ''}}</div>
          </transition>
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input v-model="ruleForm.mobile" auto-complete="off" :maxlength="11"></el-input>
          <transition name="el-zoom-in-top">
            <div class="el-form-item__error" v-if="errors.mobile">{{errors.mobile ? errors.mobile[0] : ''}}</div>
          </transition>
        </el-form-item>
        <el-form-item label="工作信息" prop="job">
          <el-select
            v-model="ruleForm.job"
            multiple
            filterable
            allow-create
            placeholder="请选择文章标签">
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <transition name="el-zoom-in-top">
            <div class="el-form-item__error" v-if="errors.job">{{errors.job ? errors.job[0] : ''}}</div>
          </transition>
        </el-form-item>
        <el-form-item label="住址" prop="selectedOptions">
          <el-cascader
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
          <transition name="el-zoom-in-top">
            <div class="el-form-item__error" v-if="errors.area">{{errors.area ? errors.area[0] : ''}}</div>
            <div class="el-form-item__error" v-if="errors.city">{{errors.city ? errors.city[0] : ''}}</div>
            <div class="el-form-item__error" v-if="errors.province">{{errors.province ? errors.province[0] : ''}}</div>
          </transition>
        </el-form-item>
      </el-col>
      <el-col :span="3" :offset="1">

        <template v-if="openWebcam">
          <template v-if="photo">
            <img :src="photo" alt="">
            <div class="p-button">
              <el-button type="primary" @click="photo = null">重新拍照</el-button>
              <el-button type="primary" @click="uploadPhoto">上传</el-button>
            </div>
          </template>
          <template v-else>
            <webcam ref='webcam' :width="250" :height="250"></webcam>
            <div class="p-button">
              <el-button type="primary" @click="take_photo">拍照</el-button>
              <el-button type="primary" @click="openWebcam = false">关闭摄像头</el-button>
            </div>
          </template>
        </template>

        <template v-else>
          <img :src="photo" v-show="ruleForm.avatar_id" alt="">
          <div class="p-button">
            <el-button type="primary" @click="openWebcam = true">开启摄像头</el-button>
          </div>
        </template>
      </el-col>




    </el-row>
    <el-row>
      <el-col :span="14" :offset="3">
        <el-form-item label="详细住址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
          <transition name="el-zoom-in-top">
            <div class="el-form-item__error" v-if="errors.address">{{errors.address ? errors.address[0] : ''}}</div>
            <div class="el-form-item__error" v-if="errors.city">{{errors.city ? errors.city[0] : ''}}</div>
            <div class="el-form-item__error" v-if="errors.province">{{errors.province ? errors.province[0] : ''}}</div>
          </transition>
        </el-form-item>

        <el-form-item label="卡种" prop="cards_type_id">
          <el-select v-model="ruleForm.cards_type_id" filterable placeholder="请选择卡种" @visible-change="getCardsType">
            <el-option  v-for="item in options1"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
            </el-option>
          </el-select>
          <transition name="el-zoom-in-top">
            <div class="el-form-item__error" v-if="errors.cards_type_id">{{errors.cards_type_id ? errors.cards_type_id[0] : ''}}</div>
          </transition>
        </el-form-item>

        <el-row>
          <el-col :span="9">
            <el-form-item label="责任会籍" prop="saleman_uuid">
              <el-select v-model="ruleForm.saleman_uuid" filterable placeholder="责任会籍" @visible-change="getCardsType">
                <el-option v-for="item in options2"
                           :key="item.uuid"
                           :label="item.realname"
                           :value="item.uuid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="责任教练" prop="coach_uuid">
          <el-select v-model="ruleForm.coach_uuid" filterable placeholder="责任教练" @visible-change="getCardsType">
            <el-option v-for="item in options3"
                       :key="item.uuid"
                       :label="item.realname"
                       :value="item.uuid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormCreate(ruleForm)">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { regionData, CodeToText } from 'element-china-area-data'
  import Webcam from 'components/Webcam'
  import { data2blob } from '@/utils/index'
  import { upLoad } from '@/api/member'
  import { ExtraInfo, CreateCard } from '@/api/opencard'
  export default {
    components: {
      Webcam
    },
    data() {
      return {
        errors: {},
        listLoading: false,
        options: regionData,
        selectedOptions: [],
        options1: [{
          id: '',
          title: ''
        }],
        options2: [{
          uuid: '',
          realname: ''
        }],
        options3: [{
          uuid: '',
          realname: ''
        }],
        photo: null,
        openWebcam: false,
        ruleForm: {
          avatar_id: '',
          name: '',
          birthday: '',
          cards_type_id: '',
          saleman_uuid: '',
          coach_uuid: '',
          address: '',
          job: [],
          sex: '男',
          mobile: '',
          province: '',
          city: '',
          area: '',
        },
        options5: []
      }
    },
    methods: {
      // 照片上传
      uploadPhoto() {
        const formData = new FormData()
        formData.append('file', data2blob(this.photo), `avatar-${this.ruleForm.name}`)
        upLoad(formData).then((res) => {
          this.ruleForm.avatar_id = res.id
          this.$message({ type: 'success', message: '照片上传成功' })
          this.openWebcam = false
        })
      },
      take_photo() {
        this.photo = this.$refs.webcam.getPhoto();
      },
     // 开卡请求
      submitFormCreate(ruleForm) {
        this.errors = {}
        this.listLoading = true
        CreateCard(ruleForm).then(res => {
          this.$message({ message: '开卡成功', type: 'success' })
          this.listLoading = false
          this.resetForm('ruleForm') // 清空表单
        }).catch((error) => {
          const { response, request, config } = error
          this.errors = response.data.errors
          this.listLoading = false
          if(this.errors.avatar_id){
            this.$message.error({ message: this.errors.avatar_id })
          }
        })
      },
      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 地址改变
      handleChange(value) {
        this.ruleForm.province = CodeToText[value[0]]
        this.ruleForm.city = CodeToText[value[1]]
        this.ruleForm.area = CodeToText[value[2]]
      },
      // 日期改变
      pickerChange(val) {
        this.ruleForm.birthday = val
      },
      getExtraInfo() {
        ExtraInfo().then(res => {
          this.options1 = res.card_type.data
          this.options2 = res.saleman.data
          this.options3 = res.coach.data
          this.options5 = res.job
        })
      },
      getCardsType(uu) {
        if(uu)  this.getExtraInfo()
      }
    },
    // 获取创建或更新卡的责任教练，卡种，责任会籍信息
    mounted() {
      this.getExtraInfo()
    }
  }
</script>

<style scoped>
  .el-col-12 .el-form-item{
    margin-bottom: 17px;
  }
  .p-button{
    width: 250px; text-align: center;padding-top: 20px
  }
</style>
